<template>
  <div class="about">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>我是来测试的{{ testfunc() }}</p>
    <p>全名：{{ fullName }}</p>
    <div v-bind:style="styleObject">时间</div>
    <ul>
      <li v-for="n in evenNumbers" :key="n">{{ n }}</li>
    </ul>
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
    <input @keydown="onPageDown" />
  </div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
  <p>fdasfdsa{{tt}}</p>
</template>
<script>
import store from '@/store/index'
export default {
  data() {
    return {
      message: "Hello",
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar",
      numbers: [1, 2, 3, 4, 5],
      styleObject: {
        color: "red",
        fontSize: "50px",
      },
      checkedNames: [],
    };
  },
  computed: {
    reversedMessage: function () {
      return this.message.split("").reverse().join("");
    },
    evenNumbers: function () {
      return this.numbers.filter((number) => number % 2 == 0);
    },
    tt:function(){
      return store.state.token
    }
  },
  watch: {
    fullName: function () {
      return this.firstName + " " + this.lastName;
    },
    tt: function () {},
  },
  created() {
    console.log(this.reversedMessage);
  },
  methods: {
    testfunc() {
      return "我用了方法调用";
    },
    warn: function (message, event) {
      // 现在我们可以访问原生事件对象
      if (event) {
        event.preventDefault();
      }
      alert(message);
    },
    onPageDown() {
      alert(123);
    },
  },
};
</script>
